<template>
    <div>
        <!-- 整个页面的外层容器 -->
        <el-container>
            <!-- 顶栏 -->
            <el-header class="layout-header">
                <h1>后台管理</h1>
            </el-header>
            <!-- 下半部分区域 -->
            <el-container class="layout-body">
                <!-- 左侧边栏 -->
                <el-aside class="layout-aside">
                    <el-menu
                        router
                        :default-active="$router.currentRoute.path"
                        class="el-menu-vertical-demo"
                        background-color="#222c32"
                        text-color="#fff"
                        active-text-color="#fff"
                    >
                        <!-- 首页 -->
                        <el-menu-item index="1">
                            <i class="el-icon-location"></i>
                            <span>首页</span>
                        </el-menu-item>
                        <!-- 管理员管理 -->
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>管理员管理</span>
                            </template>
                            <el-menu-item index="1-1">
                                <i class="el-icon-location"></i>
                                <span>添加管理员</span>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <i class="el-icon-location"></i>
                                <span>管理员列表</span>
                            </el-menu-item>
                        </el-submenu>
                        <!-- 权限管理 -->
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>权限管理</span>
                            </template>
                        </el-submenu>
                        <!-- 订单管理 -->
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>订单管理</span>
                            </template>
                            <el-menu-item index="1-1">
                                <i class="el-icon-location"></i>
                                <span>历史订单</span>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <i class="el-icon-location"></i>
                                <span>可接受订单</span>
                            </el-menu-item>
                            <el-menu-item index="1-3">
                                <i class="el-icon-location"></i>
                                <span>进行中订单</span>
                            </el-menu-item>
                        </el-submenu>
                        <!-- 卡车管理 -->
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>卡车管理</span>
                            </template>
                            <el-menu-item index="1-1">
                                <i class="el-icon-location"></i>
                                <span>添加卡车</span>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <i class="el-icon-location"></i>
                                <span>卡车列表</span>
                            </el-menu-item>
                        </el-submenu>
                        <!-- 司机管理 -->
                        <el-submenu index="6">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>司机管理</span>
                            </template>
                            <el-menu-item index="1-1">
                                <i class="el-icon-location"></i>
                                <span>添加司机</span>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <i class="el-icon-location"></i>
                                <span>司机列表</span>
                            </el-menu-item>
                        </el-submenu>
                        <!-- 用户管理 -->
                        <el-submenu index="7">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>用户管理</span>
                            </template>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <!-- 主体 -->
                <el-main class="layout-main">
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style>
.layout-header {
    background: #1684b0;
    color: #fff;
}

.layout-header h1 {
    line-height: 60px;
}

.layout-body {
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
}

.layout-aside {
    background: #222c32;
}

.layout-aside i {
    color: #fff !important;
}

.layout-main {
}

.el-menu-item.is-active {
    background: #2d3c4d !important;
}
</style>

<script>
export default {};
</script>
